<template>
  <div>
    <div class="this_container">
      <template v-for="(item, id) in imageList" >
        <div class="this_img" @click="emitImgSrc(item.fileUrl)">
          <a href="#">
            <img :src="item.fileUrl" height="150"/>
          </a>
        </div>
      </template>
    </div>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { listImage } from "@/api/blog/image";

export default {
  name: 'myImageList',
  data() {
    return {
      total: 0,
      // 图片表格数据
      imageList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询图片列表 */
    getList() {
      this.loading = true;
      listImage(this.queryParams).then(response => {
        this.imageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    emitImgSrc(arg){
      this.$emit('input', arg);
    }
  }
}
</script>

<style scoped>
.this_container{
  display: flex;
  flex-wrap: wrap;
  width: 800px;
}
.this_img{
  margin: 10px 10px 10px 10px;
}
</style>
